<template>
  <el-container style="height: 100%; width: 100%">
    <el-header>
      <div>
        <el-input
            v-model="keyword"
            placeholder=""
            class="input-with-select"
            style="width: 30%; margin-right: 20px"
        >
          <template #append>
            <el-button :icon="Search" @click="searchSomething">搜索</el-button>
          </template>
        </el-input>
        <el-radio v-model="typeradio" label="article">文章</el-radio>
        <el-radio v-model="typeradio" label="user">用户</el-radio>
        <el-radio v-model="typeradio" label="group">群聊</el-radio>
      </div>
    </el-header>
    <el-container style="height: 80%;">

      <el-main style="width: 75%;">
        <el-scrollbar height="100%">
          <div v-infinite-scroll="load">
            <template v-if="typeradio === 'article'">
              <el-card  v-for="(item,index) in articles" :key="index" class="box-card" style="width: 97%; margin: 10px">
                <template #header>
                  <div class="card-header">
                    <el-button class="button" @click="toArticleDetail(index)" type="text">{{item.article.title}}</el-button>
                  </div>
                </template>
                <div style="height: 100px" v-html="item.article.body"></div>
              </el-card>
            </template>

            <template v-else-if="typeradio === 'user'">
              <el-card  v-for="(item,index) in users" :key="index" class="box-card" style="width: 97%; margin: 10px">
                <template #header>
                  <div class="card-header">
                    <el-button class="button" @click="toOwnPage(index)" type="text">{{item.username}}</el-button>
                  </div>
                </template>
                <div style="height: 100px" v-html=item.description></div>
              </el-card>
            </template>

            <template v-else-if="typeradio === 'group'">
              <el-card v-for="(item,index) in sessions" :key="index" class="box-card" style="width: 97%; margin: 10px">
                <template #header>
                  <div class="card-header">
                    <p>{{item.sessionname}}</p>
                  </div>
                </template>
                <div>
                  <el-button class="button" @click="joinGroup(index)">加入群聊</el-button>
                </div>
              </el-card>
            </template>

          </div>
        </el-scrollbar>
      </el-main>

      <div style="width: 1px;background-color: #cbcbcb"></div>

      <el-scrollbar height="100%" style="width: 25%">
        <el-aside width="100%">
          <el-space direction="vertical">
            <el-card v-for="item in heros" class="box-card" style="width: 300px">
              <template #header>
                <div class="card-header">
                  <span>{{item.name}}</span>
                  <!--                <el-button class="button" type="text"></el-button>-->
                </div>
              </template>
              <div>
                <!--              {{item.description}}-->
                <el-image style="width: 50%" fit="contain" :src="item.image"></el-image>
              </div>
            </el-card>
          </el-space>
        </el-aside>
      </el-scrollbar>

    </el-container>
  </el-container>
</template>

<script>
import {Search} from '@element-plus/icons-vue';
import request from "@/utils/request";
import router from "@/router";
import {getUserInfo} from "@/utils/owninfo";

export default {
  name: "Home",
  data() {
    return {
      Search,
      keyword:null,
      typeradio:'article',
      // articleSum: null,
      articleCurrent: 1,
      articleSize: 5,
      lastRealSize: 0,
      articles: null,
      pageNum:null,
      heros: [{name:"陈独秀",image:require('@/assets/chenduxiu.png'),description:"陈独秀"},
        {name:"李大钊",image:require('@/assets/lidazhao.png'),description:"李大钊"},
        {name:"胡适",image:require('@/assets/hushi.png'),description:"胡适"}],
      users:[],
      sessions:[],
    }
  },
  mounted(){
    this.loadArticle()
  },
  methods: {
    load(){
      if(this.lastRealSize >= this.articleSize){
        request({
          url: '/article/getarticleinelasticsearch',
          method: 'get',
          params:{
            current: this.articleCurrent,
            size: this.articleSize,
            keyword: this.keyword,
          }
        }).then(response => {
          console.info(response)
          this.lastRealSize = response.data.articles.length
          if(response.data.articles.length > 0){
            this.articles = this.articles.concat(response.data.articles)
            this.articleCurrent+=1;
          }
        }).catch(error => {
          console.info(error)
        })
      }else{
        if (this.articles != null) {
          this.$message.info("没有更多文章了")
        }
      }
    },
    loadArticle(){
      request({
        url: '/article/getarticleinelasticsearch',
        method: 'get',
        params:{
          current: this.articleCurrent,
          size: this.articleSize,
          keyword: this.keyword,
        }
      }).then(response => {
        console.info(response)
        this.articles = response.data.articles
        this.lastRealSize = this.articles.length
        if(this.articles.length>=this.articleSize){
          this.articleCurrent+=1;
        }
      }).catch(error => {
        console.info(error)
      })
    },
    searchSomething(){
      if(this.typeradio === 'article'){
        this.searchArticle();
      }else if(this.typeradio === 'user'){
        this.searchUsers()
      }else if(this.typeradio === 'group'){
        this.searchSessions()
      }
    },
    searchArticle(){
      this.articles = [];
      this.articleCurrent = 1;
      this.loadArticle();
    },
    // loadArticle(){
    //   request({
    //     url: '/article/getarticle',
    //     method: 'get',
    //     params:{
    //       current: this.articleCurrent,
    //       size: this.articleSize,
    //     }
    //   }).then(response => {
    //     console.info(response)
    //     this.articles = response.data.articles
    //     this.pageNum = response.data.pageNum
    //   }).catch(error => {
    //     console.info(error)
    //   })
    // },
    toArticleDetail(index){
      router.push({
        name:"ArticleDetail",//这个name就是你刚刚配置在router里边的name
        query:{
          article: JSON.stringify(this.articles[index]),
        }
      })
    },
    searchUsers(){
      request({
        url: '/user/searchusersbyusername',
        method: 'get',
        params:{
          keyword: this.keyword,
        }
      }).then(response => {
        console.info(response)
        this.users = response.data.users
      }).catch(error => {
        console.info(error)
      })
    },
    searchSessions(){
      request({
        url: '/session/searchsessionsbysessionname',
        method: 'get',
        params:{
          keyword: this.keyword,
        }
      }).then(response => {
        console.info(response)
        this.sessions = response.data.sessions
      }).catch(error => {
        console.info(error)
      })
    },
    toOwnPage(index){
      router.push({
        name:"OwnPage",//这个name就是你刚刚配置在router里边的name
        query:{
          user:JSON.stringify(this.users[index])
        }
      })
    },
    joinGroup(index){
      request({
        url: '/session/joinsession',
        method: 'get',
        params:{
          userid: getUserInfo(),
          sessionid:this.sessions[index].sessionid
        }
      }).then(response => {
        console.info(response)
        this.$message.success("加入成功")
      }).catch(error => {
        console.info(error)
        this.$message.error("网络错误")
      })
    },
  },
  components: {

  }
}
</script>

<style>


</style>
